<template>
  <div class="login-container">

    <div>
      <img class="login_img" src="@/assets/login_images/login-img.png">
    </div>

    <div class="login">
      <el-form ref="loginForm"
               :model="loginForm"
               :rules="loginRules"
               class="login-form"
               auto-complete="off"
               status-icon
               label-position="left">

        <div class="login_logo">
          <img class="login_logo_img" src="@/assets/login_images/login_logo.png">
        </div>

        <h3 class="title">城院慕课后台管理</h3>

        <el-form-item prop="username">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入登录手机号"
            name="username"
            oninput = "value=value.replace(/[^\d]/g,'')"
            type="text"
            maxlength="11"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>

        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            maxlength="20"
            auto-complete="new-password"
          />
          <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
        </el-form-item>

        <el-col :span="12">
          <el-form-item prop="codeImg" style="width: 200px">

          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>

            <el-input
              ref="codeImg"
              style="width: 140px"
              v-model="loginForm.codeImg"
              placeholder="请输入验证码"
              name="codeImg"
              type="text"
              maxlength="4"
              oninput = "value=value.replace(/[^\w]/g,'')"
              tabindex="3"
              @keyup.enter.native="handleLogin"
              auto-complete="off"
            />

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item style="width: 180px;margin-left: 15px">
            <img :src="this.verify.codeImg" class="verify-code" @click="changeVerifyCode">
          </el-form-item>
        </el-col>


        <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登录</el-button>

      </el-form>
    </div>

    <div class="tips">
      <span>温馨提示 : 密码必须包含字母和数字，区分大小写 | 验证码看不清可点击验证码进行更换</span>
    </div>

  </div>
</template>

<script>
import { validUsername, validPassword, validCode } from '@/utils/validate'
import { getKaptcha,checkKaptcha,updateKaptcha } from '@/api/kaptcha'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error("请输入6-20位密码，区分大小写，不能使用空格"));
      } else {
        callback();
      }
    }
    const validateCode = (rule, value, callback) => {
      if (!validCode(value)) {
        callback(new Error("请输入正确的验证码"));
      }
      else {
        let data = {"codeImg":this.loginForm.codeImg,"codeToken":this.verify.codeToken}
        checkKaptcha(this.$qs.stringify(data)).then(result => {
          let {code,message} = result
          if (code === 20000) callback()
          else {
            callback(new Error(message));
          }
        })
      }
    }

    return {
      loginForm: {
        username: '',
        password: '',
        codeImg: '',
        codeToken: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        codeImg: [{ required: true, trigger: 'blur', validator: validateCode }],
      },
      loading: false,
      passwordType: 'password',
      verify: {
        codeImg: 'data:image/png;base64,',
        codeToken: ''
      },
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.loginForm.codeToken = this.verify.codeToken
          this.$store.dispatch('user/login', this.$qs.stringify(this.loginForm))
            .then(() => {
            this.$router.push({ path: this.redirect || '/' })
              this.$message.success('登录成功！')
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },

    //获取图形验证码
    getVerifyCode(){
      getKaptcha().then(result => {
        let {code,data} = result
        if (code === 20000){
          this.verify.codeToken = data.item.codeToken
          this.verify.codeImg += data.item.codeImg
        }
      })
    },

    //更换图形验证码
    changeVerifyCode(){
      updateKaptcha(this.$qs.stringify(this.verify)).then(result => {
        let {code,data} = result
        if (code === 20000){
          this.verify.codeImg = 'data:image/png;base64,'
          this.verify.codeToken = ''
          this.verify.codeToken = data.item.codeToken
          this.verify.codeImg += data.item.codeImg
        }
      })
    }

  },
  created() {
    this.getVerifyCode()
  }
}
</script>

<style lang="scss">
  $bg:#93defe;
  $light_gray:#444;

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
      vertical-align:middle;
      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
      }
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
    //消除google浏览器记住密码自动填充黄色框背景
    :-webkit-autofill,
    :-webkit-autofill:hover,
    :-webkit-autofill:focus,
    :-webkit-autofill:active {
      -webkit-text-fill-color: #2b739d !important;
      transition: background-color 5000s ease-in-out 0s;
    }
  }
</style>

<style lang="scss" scoped>
  $bg:#93defe;
  $dark_gray:#889aa4;
  $light_gray:#444;
  .login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: $bg;
    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 520px;
      max-width: 100%;
      padding: 35px 35px 15px 35px;
      margin: 70px auto;
    }
    .login_img {
      width: 500px;
      height: 450px;
      position: fixed;
      bottom: 0;
      left: 200px;
      top:150px;
    }
    .login_logo_img {
      width: 60px;
      height: 60px;
      display: inline-block;
      vertical-align: middle;
    }
    .login_logo {
      width: 120px;
      height: 120px;
      border: 5px solid #93defe;
      border-radius: 100px;
      background: #fff;
      text-align: center;
      line-height: 100px;
      position: absolute;
      top: -130px;
      right: 170px;
    }
    .login {
      height: 500px;
      width: 460px;
      background-color: #ffffff;
      border-radius: 6px;
      box-sizing: border-box;
      float: right;
      margin-right: 200px;
      position: relative;
      margin-top: 100px;
    }
    .tips {
      font-size: 16px;
      position: fixed;
      bottom: 0;
      left: 0;
      top:680px;
      text-align: center;
      right: 0;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .verify-code{
      vertical-align:middle;
      cursor: pointer;
    }
  }
</style>
